import React, {useRef} from "react";
import {Button, message} from "antd";
import {request} from "../../utils/Http";
import {page} from "../../utils/Const";
import {PlusOutlined} from "@ant-design/icons";
import {ProTable} from "@ant-design/pro-components";

const Monitor = () => {
    const ref = useRef();
    const columns = [
        {
            title: '资源地址',
            dataIndex: 'mediaUrl',
            valueType: 'string',
            hideInSearch: true,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (text, record, _, action) => [
                <Button
                    type="link"
                    onClick={() => {
                        window.location.href = record.mediaUrl
                    }}
                >
                    下载
                </Button>,
            ],
        },

    ];

    return (
        <ProTable
            columns={columns}
            rowKey='id'
            actionRef={ref}
            search={{
                labelWidth: 80,
                // 不同的屏幕尺寸的不同适配
                span: {
                    xs: 24,
                    sm: 24,
                    md: 12,
                    lg: 12,
                    xl: 8,
                    xxl: 4,
                }
            }}
            request={async (params) => {
                page.pageSize = params.pageSize;
                page.pageCurr = params.current;
                delete params.current
                params = {...page, ...params}
                // 获取数据,注意同步异步的问题
                const data = await request.post({
                    url: "device/monitor/page",
                    params: params,
                }).then(res => {
                    return res.data
                }).catch(err => {
                    // 这里是错误回调
                    console.log(err)
                })
                return {
                    total: data.total,
                    success: true,
                    data: data.records,
                };
            }}
            dateFormatter="string"
            headerTitle="监控列表"
            toolBarRender={() => [
                <Button
                    key="button"
                    icon={<PlusOutlined/>}
                    onClick={() => {
                        request.post({
                            url: "imou/device-snap",
                        }).then(res => {
                            message.success("抓图成功");
                            // 刷新并清空,页码也会重置，不包括表单
                            ref.current?.reload();
                        }).catch(err => {
                            // 这里是错误回调
                            console.log(err)
                        })
                    }}
                    type="primary"
                >
                    抓图
                </Button>
                ,
            ]}

        />
    )
}

export default Monitor;